<template>
  <div class="material_basicData_list">
    <one-title title="物料标记" @refreshData="refresh">
      <div class="mes_btn">
        <el-button
          v-btn-permission="'openAutoStore'"
          v-if="isAutoStore === 'True'" @click="autoStore('False')">
          <i class="iconfont icon-switch_on"></i>
          自动入库开启
        </el-button>
        <el-button
          v-btn-permission="'closeAutoStore'"
          v-else-if="isAutoStore === 'False'" @click="autoStore('True')">
          <i class="iconfont icon-switch_off"></i>
          自动入库关闭
        </el-button>
        <el-button
          v-btn-permission="'batchSetting'"
          type="success" @click="dialogBatchSetting">
          <i class="iconfont icon-piliangshezhi"></i>
          批量设置
        </el-button>
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        :searchList="searchList"
        ref="mesSearch"
        :searchResult="searchResult"
        @searchInfo="_info">
      </mes-search-comp>
      <div class="table_cont table_container">
        <el-table
          tooltip-effect="dark"
          border
          stripe
          ref="mesTable"
          :data="listData.list"
          v-loading="isLoading"
          :max-height="tableMaxHeight"
          :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
          @row-click="row => $refs.mesTable.toggleRowSelection(row)"
          @sort-change="_sort"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="40"
            align="center">
          </el-table-column>
          <mes-col-comp
            :key="index"
            v-for="(column, index) in tableColumns"
            :column="column">
          </mes-col-comp>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
    <el-dialog
      title="批量设置"
      :visible.sync="dialogVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog"
      width="400px">
      <el-form class="form_dialog" label-position="right" label-width="72px">
        <el-form-item label="入库类型:" prop="storeType">
          <el-select
            size="small"
            filterable
            v-model="storeTypeSelect"
            placeholder="请选择">
            <el-option
              v-for="item in storeTypeList"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库存式生产:" prop="isMTSLabel">
          <el-select
            size="small"
            filterable
            v-model="dialogMISSelect"
            placeholder="请选择">
            <el-option
              v-for="item in booleanType"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编号作为父级节点:" prop="isAsParentNumberLabel">
          <el-select
            size="small"
            filterable
            v-model="dialogAsParentSelect"
            placeholder="请选择">
            <el-option
              v-for="item in booleanType"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="追溯要求:" prop="trackDemandLabel">
          <el-select
            size="small"
            v-model="dialogTrackDemand"
            placeholder="请选择">
            <el-option
              v-for="item in trackDemandList"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="mes_btn">
        <el-button type="primary" @click="saveBatch">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {BoolType, StorageType} from '@/components/mesDict'
import tableColumns from './tableColumns'

export default {
  components: {
    BoolType,
    StorageType
  },
  name: 'materialBasicData',
  data() {
    return {
      tableColumns: tableColumns, // 列配置
      isLoading: true, // 数据加载中
      selectData: [], // 勾选数据列表
      searchData: {}, // 查询条件
      searchResult: NaN, // 搜索结果数
      sortData: {}, // 排序对象
      dialogVisible: false, // 弹窗是否显示
      storeTypeSelect: [], // 入库类型下拉框
      dialogMISSelect: [], // 库存式生产下拉框
      dialogAsParentSelect: [], // 编号作为父级节点下拉框
      dialogTrackDemand: [], // 追溯要求下拉框
    }
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.materialBasicData.listData
    },
    // 批量设置的入库类型
    storeTypeList() {
      return this.$store.state.dict.storeType.labels || []
    },
    // 是否类型字典
    booleanType() {
      return this.$store.state.dict.booleanType.labels || []
    },
    isAutoStore() {
      return this.$store.state.isAutoStore
    },
    // 追溯要求
    trackDemandList() {
      return this.$store.state.dict.trackDemand.labels || []
    },
    // 搜索的字段
    searchList() {
      let searchList = this.tableColumns || []
      return searchList
    }
  },
  mounted() {
    this.init()
    // this.getGroupNumber()
  },
  methods: {
    // 初始化方法
    init(page) {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/material/material/list',
        module: 'materialBasicData',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : this.listData.pageSize || 15,
          query: this.searchData,
          sort: this.sortData,
        },
        state: 'listData'
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    autoStore(isAutoStoreValue) {
      // 开启关闭自动入库
      let mes = isAutoStoreValue === 'False' ? '是否要关闭自动入库' : '是否要开启自动入库'
      this.mesConfirm(mes, '自动入库').then(() => {
        let isAutoStoreId = this.booleanType.find(item => item.value === isAutoStoreValue).id
        this.$store.dispatch('saveData', {
          method: 'post',
          url: 'a/globalconfig/globalConfig/save',
          data: {'id': '1', 'isAutoStoreId': isAutoStoreId},
          noCommit: true
        }).then((res) => {
          this.$store.commit('SetState', {
            data: isAutoStoreValue,
            state: 'isAutoStore'
          })
          this.$message({
            type: 'success',
            message: '修改成功',
            duration: 1500,
            center: true
          })
        })
      })
    },
    // 查询
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 刷新
    refresh() {
      this.$refs.mesSearch.clean()
      this.$refs.mesTable.clearSort()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 批量设置弹窗
    dialogBatchSetting() {
      if (this.selectData.length) {
        // 判断是否多选
        if (this.selectData.length > 1) {
          // 多选
          this.storeTypeSelect = ''
          this.dialogMISSelect = ''
          this.dialogAsParentSelect = ''
          this.dialogTrackDemand = ''
        } else {
          // 单选
          this.storeTypeSelect = this.selectData[0].storeTypeId
          this.dialogMISSelect = this.selectData[0].isMTSId
          this.dialogAsParentSelect = this.selectData[0].isAsParentNumberId
          this.dialogTrackDemand = this.selectData[0].trackDemandId
        }
        this.dialogVisible = true
      } else {
        this.$message.error({
          message: '请选择一条物料',
          duration: 1500,
          center: true
        })
      }
    },
    // 勾选表格数据
    handleSelectionChange(val) {
      this.selectData = val
    },
    // 物料组别排序(提交的物料组别顺序与接口返回的物料组别顺序一致)
    /*
     * 按照接口返回的顺序进行遍历，然后把选中的每一个数据遍历填充到新的数组中
     * arr: 接口返回的数据 array: 选中的数据 nArr: 新的数组
     */
    arrSort(array) {
      let arr = this.$store.state.materialBasicData.groupNumber.filter(v => v != null)
      let nArr = []
      arr.map(val => {
        if (array.find(v => v === val.GROUP_NUMBER) && nArr.indexOf(val.GROUP_NUMBER) === -1) {
          nArr.push(array.find(v => v === val.GROUP_NUMBER))
        }
      })
      return nArr
    },
    // 拼接保存参数
    savaParams() {
      return this.selectData.map(val => {
        let obj = {id: val.id}
        if (this.storeTypeSelect !== '') obj.storeTypeId = this.storeTypeSelect
        if (this.dialogMISSelect !== '') obj.isMTSId = this.dialogMISSelect
        if (this.dialogAsParentSelect !== '') obj.isAsParentNumberId = this.dialogAsParentSelect
        if (this.dialogTrackDemand !== '') obj.trackDemandId = this.dialogTrackDemand
        return obj
      })
    },
    // 保存批量设置
    saveBatch() {
      const params = this.savaParams()
      let postData = {
        method: 'post',
        url: 'a/material/material/saveBatch',
        data: {
          materialList: params
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', postData).then(() => {
        this.dialogVisible = false
        this.init()
      })
    }
  }
}
</script>

<style scoped lang="less">
  .material_basicData_list {
    .form_dialog .el-select {
      width: 100%;
    }
  }
</style>
<style lang="less">
  .material_basicData_list {
    .form_dialog {
      .el-form-item__label {
        width: 130px !important;
        text-align: right;
      }

      .el-form-item__content {
        margin-left: 130px !important;
      }
    }

    .icon-switch_on {
      color: #33cc66 !important;
    }
  }
</style>
